<template>
	<view>

		<!-- banner -->
		<view class="allbanner" style="position: relative;">
			<view class="bannercenter flexcolumn">
				<view class="bannerimgtext">

					<image src="@/static/image/system/f7xn.png" mode="" class=""></image>

				</view>
				<view class="bannertext3 margin_top">{{name}}</view>
			</view>
			<image :src="topimg" mode=""></image>
		</view>
		<!-- 内容 -->
		<view class=" mainpadding">
			<!-- 搜索和筛选 -->
			<view class="sousuobox ">
				<view class="flexbetween">
					<input type="text" placeholder="请输入输入关键词" @confirm="search()" v-model="keywords"
						confirm-type="search">
					<view class="flexright" @click="search()">
						<view class="strongtext margin_right1">搜索</view>
						<u-icon name="search" color="#c89d3b" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="flexleft margin_top">
				<view class="huibtn margin_right1" @click="show = true">{{name}}</view>
				<!-- <view class="huibtn margin_right1" @click="show = true">{{childname}}</view> -->
			</view>
			<!-- 内容 -->
			<view class="" style="padding-top: 20rpx;">
				<view class="allxiahian margin_top" v-for="item in childList" :key="item.id" @click="tzfljs(item.id)">
					<view class="nostrongtext">{{item.name}}</view>
					<view class="huisetext1 margin_top">{{item.nickname}}</view>
				</view>
			</view>
			<!-- <view class="" style="padding-top: 20rpx;">
				<view class="allxiahian margin_top" v-for="item in list.data" :key="item.id" @click="tzfljs(item.id)">
					<view class="nostrongtext">{{item.name}}</view>
					<view class="huisetext1 margin_top">{{item.nickname}}</view>
				</view>
			</view> -->
		</view>
		<!-- 筛选 -->
		<u-picker :show="show" ref="uPicker" keyName="name" :columns="columns" @confirm="confirm" @cancel="show = false" ></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				columns: [
					[{
						id: 1,
						name: "法律"
					}, {
						id: 2,
						name: "解释"
					}]
				],
				columnData: [],
				topimg: "",
				keywords: "",
				page: 1,
				limit: 12,
				list: {
					data: [],
				},
				id: "",
				name: "",
				childid: "",
				childname: "",
				childList:[],
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.id = data.id
			this.name = data.name
			this.childList = data.child
			// this.childid = data.childid
			// this.childname = data.childname
			// this.init()
			this.getbanner()
			this.index()
		},
		methods: {
			search(){
				uni.navigateTo({
					url: '/pages/index/falvjs?id=' + this.id+"&keywords="+this.keywords
				})
			},
			index() {
				httpRequest.request('/api/index/flfgTypeIndex', 'GET', {}, false, false, true).then(res => {
					let arr1 = []
					res.data.data.forEach((item, index) => {
						arr1.push({
							id: item.id,
							name: item.name,
							child:item.child
						})
						// let arr2 = []
						// item.child.forEach(ite => {
						// 	arr2.push({
						// 		id: ite.id,
						// 		name: ite.name
						// 	})
						// })
						// console.log(arr2, "000");
						// this.columnData[index] = arr2
					})
					this.columns[0] = arr1
					// this.columns[1] = this.columnData[0]
					console.log(this.columns, "000");
					console.log(this.columnData, "000");
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 10,
					is_more: 2
				}, false, false, true).then(res => {
					this.topimg = res.data.image_text
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request("/api/index/flfgThreeIndex", 'GET', {
					page: page || 1,
					limit: _this.limit,
					id: this.childid,
					keywords: this.keywords,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转法律解释
			tzfljs(id) {
				uni.navigateTo({
					url: '/pages/index/falvjs?id=' + id
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log(e,"9999");
				this.id = e.value[0].id
				this.name = e.value[0].name
				// this.childid = e.value[1].id
				// this.childname = e.value[1].name
				this.childList = e.value[0].child
				this.show = false
				// this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huibtn {
		padding: 10rpx 20rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: 400;
		color: #000000;

	}

	.sousuobox1 {
		border-radius: 20rpx;
		background-color: #F4F4F4;
		padding: 10rpx 20rpx;
	}

	.fudongdw {
		position: absolute;
		bottom: 68rpx;
		left: 43%;
	}
</style>